<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本使用</title>
</head>
<body>
    <button id="btn">点击抽奖</button>
    <script>
        function rand(m, n) {
            return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
        }
        // 点击按钮, 2s 后显示是否中奖.  30% 概率中奖  『1-100』
        // 中奖弹出   恭喜恭喜   显示中奖号码
        // 未中奖弹出  再接再厉   显示数字
        
        //获取按钮元素
        let btn = document.querySelector('#btn');

        //绑定事件
        // btn.onclick = function(){
        //     //启动定时器
        //     setTimeout(() => {
        //         //判断用户是否中奖
        //         let num = rand(1, 100);
        //         //判断
        //         if(num <= 30){
        //             alert(`恭喜恭喜, 您的中奖号码为${num}`);
        //         }else{
        //             alert('再接在厉, 您的号码为' + num);
        //         }
        //     }, 1000);
        // }

        btn.onclick = function(){
            //实例化 promise 对象   resolve 解决 搞定  reject 拒绝，否决
            let p = new Promise((resolve, reject) => {
                setTimeout(() => {
                    //生成随机数
                    let num = rand(1, 100);
                    //判断
                    if(num <= 30){
                        //成功了
                        resolve(num);//成功的结果值
                    }else{
                        //失败了
                        reject(num);//失败的结果值
                    }
                }, 1000)
            });
        
            //处理异步的任务的结果   then 然后
            p.then((value) => { //value 值
                alert(`恭喜恭喜, 您的中奖号码为 ${value}`);
            },  (reason) => { //reason 原因
                alert(`再接再厉, 您的号码为 ${reason}`);
            });
        }
        
    </script>
</body>

</html>